<template>
  <div>
    <!-- ====================== 商品分类 ==================== -->
    <!-- 面包屑 -->
    <MBX level1="商品管理" level2="商品分类"></MBX>

    <!-- 卡片主体 -->
    <el-card class="mt16">
      <!-- 添加按钮 -->
      <el-button type="primary" @click="goodsAdd">添加分类</el-button>

      <!-- 表格 -->
      <el-table
        :data="goodsFenLieData"
        row-key="cat_id"
        class="mt16"
        border
        style="width: 100%"
      >
        <el-table-column type="index" label="#">
          <template slot-scope="scope">
            <div>
              {{ scope.row.index }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="分类名称" prop="cat_name"> </el-table-column>
        <el-table-column label="是否有效" prop="cat_deleted">
          <template slot-scope="scope">
            <div>
              <i
                v-if="!scope.row.cat_deleted"
                class="el-icon-success"
                style="color: #1ad31a"
              ></i>
              <i v-else class="el-icon-error" style="color: #f00"></i>
            </div>
          </template>
        </el-table-column>

        <el-table-column label="排序" prop="cat_level">
          <template slot-scope="scope">
            <div>
              <el-tag :type="typeArr[scope.row.cat_level]">
                {{ scope.row.cat_level | rank }}</el-tag
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <!-- 编辑  -->
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                @click="EditCateDia(scope.row)"
                >编辑</el-button
              >
              <!-- 删除   -->
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                @click="del(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="block mt16">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- -- 【添加】对话框 弹出框 :rules="rules" -->
    <el-dialog
      @close="resetForm"
      title="添加分类"
      :visible.sync="goodsAddStatus"
    >
      <el-form :model="addCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="addCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="父级分类" label-width="80px">
          <el-cascader
            ref="twoCateRef"
            v-model="checkCateArr"
            :options="twoCateData"
            :props="defaultProps"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="goodsAddStatus = false">取 消</el-button>
        <el-button type="primary" @click="yesAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 【编辑】对话框 -->
    <el-dialog @close="resetForm" title="编辑分类" :visible.sync="isEditCate">
      <el-form :model="EditCateForm">
        <el-form-item label="分类名称" label-width="80px">
          <el-input
            v-model="EditCateForm.cat_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isEditCate = false">取 消</el-button>
        <el-button type="primary" @click="updateCateOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  goodsFenLieApi,
  goodsCateAddApi,
  editGoodsCateApi,
  goodsFenLeiDelApi,
} from "../../../http/api.js";
export default {
  data() {
    return {
      // 编辑的内容
      EditCateForm: {
        cat_name: "",
      },
      query: "", // 搜索的
      total: 0, // 总页数
      goodsFenLieData: [], // 分类列表数据
      //查询条件// 列表要用的数据
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      // 等级的不同颜色
      typeArr: {
        0: "primary",
        1: "success",
        2: "warning",
      },
      goodsAddStatus: false, // 添加的弹出框的状态
      //绑定分类数据
      addCateForm: {
        cat_name: "",
        cat_pid: "",
        cat_level: "",
      },
      checkCateArr: [], // 添加的父级分类中的下拉的中的有个数据
      twoCateData: [], // 添加的父级分类中的下拉的中的有个数据
      defaultProps: {
        checkStrictly: true,
        expandTrigger: "hover",
        label: "cat_name",
        children: "children",
        value: "cat_id",
      },
      isEditCate: false, // 编辑的弹出来框的状态
    };
  },
  methods: {
    // 删除
    del(val) {
      // console.log("删除", val.cat_id, val.cat_pid);
      this.$confirm("是否要删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })

        .then(async () => {
          const res = await this.$API.goodsFenLeiDelApi(Number(val.cat_id));
          this.goodFenLeiList();

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //确定编辑  更新到后台数据
    async updateCateOk() {
      // console.log("要更新的对象：", this.EditCateForm);
      const { cat_id: cadId, cat_name: catName } = this.EditCateForm;
      const res = await this.$API.editGoodsCateApi(cadId, catName);
      console.log(res);
      this.goodFenLeiList();
      this.isEditCate = false;
    },
    //打开编辑对话框
    EditCateDia(row) {
      // console.log("row:", row);
      this.EditCateForm.cat_name = row.cat_name;
      this.EditCateForm.cat_id = row.cat_id;
      this.isEditCate = true;
    },
    //重置分类默认值
    resetForm() {
      this.addCateForm = {};
      this.checkCateArr = [];
    },
    // 点击弹出框的确定按钮  向后台添加数据
    async yesAdd() {
      if (this.checkCateArr.length !== 0) {
        this.addCateForm.cat_pid =
          this.checkCateArr[this.checkCateArr.length - 1];
        this.addCateForm.cat_level = this.checkCateArr.length;
      } else {
        this.addCateForm.cat_pid = 0;
        this.addCateForm.cat_level = 0;
      }
      console.log(this.addCateForm);

      const res = await this.$API.goodsCateAddApi(this.addCateForm);
      console.log(res);

      this.goodFenLeiList();
      this.goodsAddStatus = false;
    },
    // 点击分类商品按钮 弹出 弹出框框
    async goodsAdd() {
      const res = await this.$API.goodsFenLieApi({ type: 2 });
      // console.log("二级分类：", res);
      this.twoCateData = res;
      console.log("twoCateRef二级分类:", this.twoCateData);
      this.goodsAddStatus = true;
    },
    //监听选择分类改变的方法
    handleChange() {
      this.$refs.twoCateRef.dropDownVisible = false;
    },
    // 请求分类列表数据
    async goodFenLeiList() {
      const res = await this.$API.goodsFenLieApi(this.queryInfo);
      // console.log("分类列表数据:", res);
      const { total, result } = res;
      result.forEach((item, index) => {
        item.index = index + 1;
      });
      this.goodsFenLieData = result;
      this.total = total;
    },
    //   分页
    handleSizeChange(val) {
      this.queryInfo.pagesize = val;
      this.goodFenLeiList();
    },
    handleCurrentChange(val) {
      this.queryInfo.pagenum = val;
      this.goodFenLeiList();
    },
  },
  created() {
    this.goodFenLeiList();
  },
};
</script>
